<script>
import {onSubmitLogin} from "@/axios/request/index.js";

export default {
  data() {
    return {
      formLogin: {
        groupId: "",
        userId: ""
      },
      formLoginRules: {
        groupId: [
          {required: true, message: '请输入群号', trigger: 'blur'}
        ],
        userId: [
          {required: true, message: '请输入QQ号', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toHome() {
      this.$router.push("/")
    },
    onSubmitLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          onSubmitLogin(this.formLogin.groupId, this.formLogin.userId,).then((result) => {
            this.$router.push('/')
            localStorage.setItem("groupId", this.formLogin.groupId)
            localStorage.setItem("userId", this.formLogin.userId)
          })
        } else {
          this.$message({
            showClose: true,
            message: "请输入正确的群号和QQ号，再点击登陆",
            type: "error"
          })
        }
      })
    }
  }
}
</script>

<template>
  <el-container>
    <el-main>
      <div class="login-title">
        <h2><i class="el-icon-goods"></i>warframeBot · 沃肥机器人</h2>
      </div>
      <div class="login-from-div">
        <h1>群友登陆</h1>
        <el-row justify="space-evenly">
          <el-col :span="12" :offset="6">
            <el-form ref="formLogin" :model="formLogin" :rules="formLoginRules" :label-width="80" style="width: 500px;">
              <el-form-item label="群号" prop="groupId" style="font-weight: bolder;">
                <el-input v-model="this.formLogin.groupId" placeholder="请输入您的群号"></el-input>
              </el-form-item>
              <el-form-item label="QQ号" prop="userId" style="font-weight: bolder;">
                <el-input type="password" v-model="this.formLogin.userId" placeholder="请输入您的QQ号"
                          show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="this.onSubmitLogin('formLogin')">立即登录</el-button>
                <el-button @click="this.resetForm('formLogin')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-link @click="this.toHome()" :underline="false" style="font-weight: bolder;">先不登录，返回主页</el-link>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.login-title {
  text-align: center;
}

.login-from-div {
  margin-top: 5px;
  text-align: center;
  border: black 2px solid;
  border-radius: 25px;
  padding-bottom: 20px;
}
</style>